<template>
  <div class="loginHeader">
    <div class="wrapper">
      <ul class="left">
        <li>
          <a href="javascript:void(0)">
            <span class="iconfont icon-homeshape"></span>
            <span>飞猪</span>
          </a>
        </li>
        <li>
          <div>
            <span class="grey">Hi,最近想去哪里玩？</span>
            <a href="javascript:void(0)">请登录</a>
            <a href="javascript: void(0)">免费注册</a>
          </div>
        </li>
      </ul>
      <ul class="right">
        <li>
          <div class="menu-item" @click="menu_drop_1=!menu_drop_1" :class="{active:menu_drop_1}"><a href="javascript: void(0)">手机客户端</a>
            <i class="down-arrow">
              <em>em</em>
              <span>span</span>
            </i>
          </div>
          <transition name="fade">
            <div class="menu-drop" v-show="menu_drop_1">
              <input type="text" placeholder="请输入您的手机号">
              <button>发送</button>
            </div>
          </transition>

        </li>
        <li>
          <div class="menu-item"><a href="javascript: void(0)">我的淘宝</a></div>
        </li>
        <li>
          <div class="menu-item"><a href="javascript: void(0)">购物车</a></div>
        </li>
        <li>
          <div class="menu-item"><a href="javascript: void(0)">收藏夹</a></div>
        </li>
        <li>
          <div class="menu-item"><a href="javascript: void(0)">服务中心</a></div>
        </li>
        <li class="divide"><div class="menu-item "></div></li>
        <li>
          <div class="menu-item"><a href="javascript: void(0)">商家中心</a></div>
        </li>
        <li>
          <div class="menu-item"><a href="javascript: void(0)">淘宝</a></div>
        </li>
        <li>
          <div class="menu-item">
            <span class="iconfont icon-mulu"></span>
            <a href="javascript: void(0)">网站导航</a>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  export default{
    data() {
      return {
        menu_drop_1 : false,
        menu_drop_2 : false,
        menu_drop_3 : false,
        menu_drop_4 : false,
        menu_drop_5 : false,
        menu_drop_6 : false,
      }
    },
    methods:{

    }
  }
</script>

<style rel="stylesheet/scss" lang="scss">
  .loginHeader{
    width: 100%;
    height: 26px;
    line-height: 26px;
    background-color: #F2F2F2;
    border-bottom: 1px solid rgba(0,0,0,0.2);
    .iconfont{
      color: rgb(255,195,0);
      font-size: 0.75rem;
    }
    .wrapper{
      width: 1190px;
      margin: 0 auto;
      font-size: 0.75rem;
      color: rgb(108,108,108);
      a{
        display: inline-block;
        height: 26px;
        line-height: 26px;
      }
      a:hover, a:hover span{
        color: #f39b03;
      }
      .left{
        float: left;
        li{
          float: left;
          margin-right: 25px;
          .grey{
            color: #aaa;
          }
        }
      }
      .right{
        float: right;
        li{
          float: left;
          height: 26px;
          line-height: 26px;
          position: relative;
          &.divide{
            width: 1px;
            height: 14px;
            background: #AAAAAA;
            margin-top: 6px;
          }
          div.menu-item{
            padding: 0 6px;
            border: 1px solid rgba(0,0,0,0);
            a{
              margin-right: 7px;
            }
          }
          .menu-item.active{
            position: relative;
            z-index: 10;
            background-color: #FFFFFF;
            border-left: 1px solid rgba(0,0,0,0.2);
            border-right: 1px solid rgba(0,0,0,0.2);
            border-top: 0;
            border-bottom: 1px solid #FFFFFF;
          }
          .menu-drop{
            position: absolute;
            top: 100%;
            left: 0;
            border: 1px solid rgba(0,0,0,0.2);
            padding: 10px 20px;
            background-color: #FFFFFF;
            input{
              border-radius: 0.25rem;
              background: #FFFFFF;
              border: 1px solid rgba(0,0,0,0.2);
              margin-bottom: 15px;
            }
            button{
              color: #f3f5f7;
              background-color: #f39b03;
            }
          }
          i.down-arrow{
            float: right;
            margin: 10px 0;
            width: 6px;
            height: 6px;
            position: relative;
            transition: transform 0.3s ease-in;
            em{
              position: absolute;
              top: 1px;
              left: 0;
              width: 0;
              height: 0;
              border: 3px solid transparent;
              border-top-color: #6C6C6C;
              overflow: hidden;
              transition: all 0.3s ease;
            }
            span{
              position: absolute;
              top: 0;
              left: 0;
              width: 0;
              height: 0;
              overflow: hidden;
              border: 3px solid transparent;
              border-top-color: #F5F5F5;
            }
          }
          .menu-item.active {
            i.down-arrow{
              transform: rotate(180deg);
            }
          }

        }
        .icon-mulu{
          font-weight: 900;
        }
      }
    }
    .fade-enter{
      opacity: 0;
    }
    .fade-enter-active{
      transition: all 0.3s ease;
    }
    .fade-leave-active{
      opacity: 0;
      transition: all 0.3s ease;
    }
  }

</style>
